/* eslint-disable react/prop-types */
import { Button, Flex, Form } from "antd"
import { useCallback, useEffect } from "react"

import useMemberApi from "@/api/member"
import { IBmhMemberInfoEdit, IModalContent } from "@/api/member/types"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter, UserInfoContainer } from "../styles"
import { CustomTextArea } from "./CustomTextArea"

export const BmhAccUnbindModal: React.FC<IModalContent> = ({ handleCancel, filterInfo, userInfo }) => {
	const { formatMessage } = useLocale()
	const { querySetBmhMemberInfoEdit } = useMemberApi()
	const [form] = Form.useForm()
	const submit = useCallback(
		async (value: IBmhMemberInfoEdit) => {
			const body = {
				bmhUserId: userInfo.bmhUserId,
				remark: value.remark
			}
			const [err] = await querySetBmhMemberInfoEdit({ ...body })
			if (err) {
				Toast.error(err.msg)
				//Toast.error(formatMessage({ id: "common.modify_failed" }))
				return
			}
			Toast.success(formatMessage({ id: "common.modify_success" }))
			handleCancel()
			form.resetFields()
		},
		[filterInfo]
	)

	useEffect(() => {}, [])

	const { loading } = useApi()

	return (
		<StyleContainter>
			<Flex align="center" gap={10}>
				<Form style={{ width: "100%" }} form={form} onFinish={submit}>
					<UserInfoContainer>
						<div className="info-container">
							<div className="info-item">
								<span>{formatMessage({ id: "member.bmh.bmh_text_1" })}</span>
							</div>
						</div>
						<div className="info-container">
							<div className="info-item">
								<span>{formatMessage({ id: "member.bmh.bmh_text_2" })}</span>
							</div>
						</div>
						<div className="info-container">
							<div className="info-item">
								<span>{formatMessage({ id: "member.bmh.bmh_text_3" })}</span>
							</div>
						</div>
					</UserInfoContainer>
					<CustomTextArea
						placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
						name="remark"
						label={formatMessage({ id: "member.submit_review_notes" }) + ":"}
					/>

					<Flex justify="center" wrap="wrap" gap={10}>
						<Button
							key="back"
							onClick={() => {
								handleCancel()
								form.resetFields()
							}}
						>
							{formatMessage({ id: "member.table_info.cancel" })}
						</Button>
						<Button htmlType="submit" type="primary" loading={loading}>
							{formatMessage({ id: "common.sure" })}
						</Button>
					</Flex>
				</Form>
			</Flex>
		</StyleContainter>
	)
}
